<template>
  <div class="articleBox">
    <div @click="clicks($event)">
      <vue-seamless-scroll
        :data="CardPartsStatisticsList"
        class="seamless-warp"
        :class-option="classOption"
      >
        <ol class="articleOl">
          <li
            class="articleOl-li"
            v-for="(item,index) in CardPartsStatisticsList"
            :key="index"
            :data-url="item.url"
          >
            <span :data-url="item.url">{{index+1}}.</span>
            <span :data-url="item.url">{{item.itemname}}</span>
            <span :data-url="item.url">{{$Fn.strToDate(item.number)}}</span>
          </li>
        </ol>
      </vue-seamless-scroll>
    </div>

    <!-- 弹窗 -->
    <div class="popup" v-if="popShow">
      <div class="close" @click="function(){popShow = false,src=''}"></div>
      <div class="popup-in">
        <iframe
          v-if="src != ''"
          :src="src"
          style="width: 990px;height: 100%;margin-top: 5px;-ms-zoom: 0.75;"
        ></iframe>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import apis from "../../public/api";

export default {
  name: "articleBox",
  components: {
    //组件
    vueSeamlessScroll
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  data() {
    return {
      popShow: false,
      CardPartsStatisticsList: [],
      src: ""
    };
  },
  methods: {
    clicks(e) {
      console.log(e.target.dataset);
      this.src = e.target.dataset.url;
      this.popShow = true;
    }
  },
  mounted() {
    this.axios
      .get(apis.querySpiderArticle, {
        //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
        params: {}
      })
      .then(res => {
        //此处要使用箭头函数，this指向才正确
        this.CardPartsStatisticsList = res.data.result;
      })
      .catch(function(error) {
        alert(error);
      });
  }
};
</script>
<style lang="less" scoped>
.popup {
  position: absolute;
  height: auto;
  width: 990px;
  top: 0;
  left: 530px;
  display: block;
  border: 2px solid #727375;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 10px;
  padding: 0.2em;
  z-index: 999999;
  overflow: hidden;
  .close {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 10px;
    background: url(../assets/close.png) no-repeat center center / 100% 100%;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
  }
  &-in {
    width: 996px;
    padding-top: 50px;
    max-height: 800px;
    height: 800px;
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 16px;
  }
}
</style>
<style lang="less">
.seamless-warp {
  overflow: hidden;
  width: 100%;
  height: 190px;
  padding-left: 41px;
}
.articleBox {
  width: 100%;
  height: 251px;
  padding-top: 45px;
  background: url(../assets/img/border1-3.png) no-repeat center center / 100%
    100%;
}
.articleOl {
  margin-top: 11px;
  color: #bdbeca;
  font-size: 13px;
  &-li {
    display: flex;
    cursor: pointer;
    span {
      margin-right: 3px;
      color: #00e3ff;
      line-height: 3;
    }
    span:nth-child(2) {
      width: 316px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right: 30px;
      color: #acf3f9;
    }
  }
  &-li:last-child {
    margin-bottom: 0;
  }
}
</style>
